<template>
  <div class="demo-conbogrid">
    <ClientOnly>
      <v-combogrid
        v-model="state.value"
        v-model:inputlabel="state.label"
        :fields="['menuId', 'menuName']"
        :data="state.tableData"
        width="400"
        height="300"
        :columns="[{ prop: 'menuName', label: '名称' }]"
        pid="menuPid"
        :row-key="'menuId'"
      >
        <template #search> slots </template>
      </v-combogrid>
    </ClientOnly>
  </div>
</template>

<script setup>
  import { reactive } from 'vue'
  import json from './remote'
  const state = reactive({
    value: '',
    label: '',
    tableData: json,
    row: null,
  })

  const rowClick = (row, column, index) => {
    state.row = row
  }
</script>

<style lang="scss" scoped>
  .demo-conbogrid {
    :deep(.el-input) {
      width: 350px;
    }
  }
</style>
